<template>
    <div id="pmw_xtsj">
        <!--选项卡插件-->
        <el-tabs id="p_xtsj_box" type="border-card" v-model="whichTab">
            <el-tab-pane label="数据备份">
                <div id="p_backup_type">
                    <el-button type="primary" @click="partBackup">核心备份</el-button>
                    <el-button type="primary" @click="allBackup">全部备份</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据恢复">
                <div class="p_table">
                    <el-table
                            :data="searchData"
                            style="width: 100%"
                            :default-sort = "{prop: 'id', order: 'ascending'}"
                            height="500"
                            :stripe=true
                            :border=true
                            :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                            :cell-style="{textAlign:'center'}"
                    >
                        <el-table-column
                                prop="id"
                                label="编号"
                                sortable
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="文件名"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                sortable
                                label="备份日期"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="time"
                                sortable
                                label="备份时间"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="action"
                                label="操作"
                                min-width="20%">
                            <template slot-scope="scope">
                                <el-button
                                        @click.native.prevent="recoverData(scope.$index, searchData)"
                                        type="text"
                                        size="small">
                                    恢复
                                </el-button>
                                <el-button
                                        @click.native.prevent="deleteData(scope.$index, searchData)"
                                        type="text"
                                        size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "pmw_xtsj",
        data() {
            return {
                searchValue: '',
                searchData:[{id:1,name:1,date:1,time:1,}],
                whichTab:''
            }
        },
        methods:{
            /*数据备份操作*/
            partBackup(){
                this.$confirm('此操作将会备份数据库内的对应文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '备份成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消备份'
                    });
                });
            },
            allBackup(){
                this.$confirm('此操作将备份数据库内的所有文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '备份成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消备份'
                    });
                });
            },
            /*表格行内操作*/
            deleteData(index,data){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            recoverData(index,data){
                this.$confirm('此操作将覆盖数据库内的对应文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '恢复成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消恢复'
                    });
                });
            }
        },
        created() {
            /*axios({
                url:'http://123.57.67.148:3000/mock/40/xtsj',
                method:'get'
            }).then(res=>{
                this.searchData=res.data.data;
            })*/
        }
    }
</script>

<style scoped lang="less">
    .el-button--primary{
        height: 40px;
        padding: 0 20px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .clear:after{
        content: '';
        clear: both;
        display: block;
    }
    #pmw_xtsj{
        position: relative;
        padding: 20px;
        /*选项卡*/
        #p_xtsj_box{
            #p_backup_type{
                height: 498px;
                margin:25px 50px;
                border: 1px #EBEEF5 solid;
                background-color: #EBEEF5;
                position: relative;
                button{
                    position: absolute;
                    top: 50%;
                    left: 66.6%;
                    margin-left: -75px;
                    margin-top: -20px;
                    width: 150px;
                    text-align: center;
                }
                button:first-child{
                    left: 33.3%;
                }
            }
            .p_table{
                padding:25px 50px;
            }
        }
    }
</style>
